<div id="extra-templates" class="hidden templates">
    <div id="pr-pay-card-mob-temp" class="hidden card-wrapper">
        <!-- X% off -->
        <div class="discount discount-title hidden"></div>
        <div class="card-head">
            <!-- Pro 1, MEGA VPN -->
            <div class="title main-title"></div>
            <!-- Free Trial -->
            <div class="title free-trial-title"></div>
            <!-- X.XX (Crossed out) -->
            <div class="discount discount-price-row hidden">
                <span class="discount old-price hidden"></span><span class="asterisk">*</span>
            </div>
            <div class="price-row">
                <span class="price"></span><span class="asterisk">*</span>
                <!-- Today | NZD / month -->
                <span class="payment-cycle"></span>
            </div>
            <div class="extra-info hidden"></div>
        </div>
        <div class="card-body gap-3">
            <div class="storage hidden"></div>
            <div class="transfer hidden"></div>
            <!-- Template for info with text and possible icon -->
            <div id="pr-pay-card-mob-f-temp" class="feature gap-4 hidden">
                <i class="icon hidden"></i>
                <span></span>
            </div>
        </div>
    </div>
    <div id="free-trial-card-temp" class="template hidden free-trial-container">
        <div class="free-trial-card">
            <div class="title">[$heres_how_it_works]</div>
            <div class="main-content grid">


                    <i class="sprite-fm-mono icon-lock"></i>
                    <div class="when step0 secondary-title">[$1301]</div>
                    <div class="line"></div>
                    <div class="content step0">[$unlock_secure_browsing]</div>


                    <i class="sprite-fm-mono icon-notification"></i>
                    <div class="when step1 secondary-title day-5"></div>
                    <div class="line"></div>
                    <div class="content step1">[$email_before_trial_end]</div>


                    <i class="sprite-fm-mono icon-star"></i>
                    <div class="when step2 secondary-title day-7"></div>
                    <div></div>
                    <div class="content step2"></div>




                <!-- <div class="steps flex gap-4"> -->

                    <!-- <div class="icons flex flex-column">
                        <i class="sprite-fm-mono icon-lock"></i>
                        <div class="line"></div>
                        <i class="sprite-fm-mono icon-notification"></i>
                        <div class="line"></div>
                        <i class="sprite-fm-mono icon-star"></i>
                    </div>
                    <div class="info flex flex-column gap-2">
                        <div class="info-block step0">
                            <div class="when secondary-title">[$1301]</div>
                            <div class="content">[$unlock_secure_browsing]</div>
                        </div>
                        <div class="info-block step1">
                            <div class="when secondary-title day-5"></div>
                            <div class="content">[$email_before_trial_end]</div>
                        </div>
                        <div class="info-block step2">
                            <div class="when secondary-title day-7"></div>
                            <div class="content"></div>
                        </div>
                    </div> -->

                <!-- </div> -->
            </div>
            <div class="price secondary-title"></div>
            <div class="tax-info secondary-title hidden"></div>
        </div>
    </div>
    <div class="suboption-radio flex flex-column gap-2" id="cancel-suboption-wrapper-temp">
        <div class="error-message error-banner">[$cancel_sub_no_opt_picked_mob]</div>
        <div class="label-wrap template hidden">
            <div class="suboption radioOff">
                <input type="radio" class="suboption radioOff">
            </div>
            <div class="radio-txt"></div>
        </div>
    </div>

    <div id="radio-with-icon-label-tmplt" class="hidden template">
        <div class="error-message"></div>
        <div class="label-wrapper">
            <div class="radio radioOff">
                <input type="radio" class="radio radioOff">
            </div>
            <div class="radio-icon hidden"></div>
            <div class="radio-txt"></div>
        </div>
    </div>

    <button id="down-arrow-text-after-tmplt" class="hidden template">
        <i class="chevron-down-icon transition"></i>
        <div class="txt"></div>
    </button>

    <div id="discount-dialog-content-temp" class="template">
        <div class="promo-overtext font-title-h3-bold red"></div>
        <h1 class="my-2 font-bold"></h1>
        <div class="duration"></div>

        <div class="info-card mt-2 p-3 border-radius-2 border-1">
            <div class="card-discount-info flex flex-row">
                <div class="previous-price flex flex-row gap-2 font-body-1 text-color-medium">
                    <div class="amount line-through"></div>
                </div>
            </div>
            <div class="flex flex-row gap-2 items-center my-2">
                <div class="price font-title-h2-bold"></div>
                <div class="per-month pt-1 font-body-1 text-color-medium"></div>
            </div>
            <div class="features font-body-1 text-color-medium mt-4"></div>
        </div>

        <div class="price-hint font-body-2 text-color-medium mt-4 relative hidden"></div>
    </div>

</div>
